@charset "UTF-8";
#competePage{
  padding-bottom: 20px;
  & .set{
    padding:15px 15px 0 15px;
    & .data-block{
      font-size: $fontSize - 2;
      background-color: $themeColor5;
      display: inline-block;
      width: 220px;
      box-sizing: border-box;
      padding: 10px 15px;
      margin-right: 10px;
      & .icon{
        font-size: $fontSize + 6;
      }
      & .bottom{
        color: $fontColor1;
        & .num{
          font-size: $fontSize + 10;
        }
      }
    }
    & .tabs{
      margin-top: 20px;
    }
  }
  & .container{
    padding:40px 15px;
    & .list{
      margin-top: 30px;
      & .list-item{
        display: inline-block;
        width: 340px;
        box-sizing: border-box;
        padding: 20px 15px;
        background-color: $themeColor5;
        font-size: $fontSize - 2;
        margin-top: 10px;
        margin-right: 10px;
        &:nth-child(3n){
          margin-right: 0;
        }
        & .name{
          font-size: $fontSize;
          color: $fontColor1;
        }
        & .time{
          margin: 5px 0;
        }
        & .btn{
          text-align: right;
        }
      }
    }
  }
  .goods-container{
    padding-top: 40px;
    padding-bottom: 40px;
    & .search-result {
      position: absolute;
      width: 100%;
      left: 0;
      top: 42px;
      height: 245px;
      overflow-y: auto;
      border-radius: 5px;
      background-color: $clf;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.078);
      line-height: normal;
      padding: 5px 0;
      z-index: 9;

      & .list {
        margin-top: 5px;

        & .result-content {
          line-height: 32px;
          text-align: left;
          color: $fontColor1;
          padding: 5px 15px;
          cursor: pointer;

          &:hover {
            background-color: $themeColor5;
          }

          & .result-title {
            display: inline-block;
            width: 90%;
            vertical-align: middle;
            @include textOverflow;
          }
        }
      }
      & .no-result{
        font-size: $fontSize - 2;
        color: $fontColor1;
        text-align: center;
        margin: 100px 0;
      }
    }
  }
  .compete{
    padding:15px;
    & .top{
      font-size: $fontSize - 2;
      color: $themeColor80;
      @include displayFlex(flex,null,center);
      position: relative;
      & .publish{
        width: 230px;
        background-color: $themeColor5;
        color: $themeColor100;
        height: 73px;
        position: relative;
        padding:0 10px;
        @include displayFlex(flex,center,center);
        & .tag{
          display: inline-block;
          line-height: 20px;
          width:45px;
          background-color: #1754D2;
          color: $clf;
          position: absolute;
          top: 0;
          left: 0;
          text-align: center;
        }
      }
      & .compete-publish{
        // display: inline-block;
        width: 230px;
        height: 73px;
        position: relative;
        text-align: center;
        cursor: pointer;
        border: 1px dashed $themeColor80;
        box-sizing: border-box;
        @include displayFlex(flex,center,center);
        &.goods{
          width: 230px;
          height: 90px;
          & .compete-goods{
            width: 100%;
            padding: 0 20px;
            @include displayFlex(flex,null,center);
            & .goods-img{
              width: 40px;
              height: 40px;
            }
            & .goods-title{
              flex-grow: 1;
              @include twoColtextOverflow;
              margin-left: 5px;
              color: $fontColor1;
              text-align: left;
            }
          }
        }
        &.active{
          border-style: solid;
          &.one{
            border-color: #57B878;
          }
          &.two{
            border-color: #FF9900;
          }
          &.three{
            border-color: #E3615C;
          }
          &.first{
            border-color: #1754D2;
          }
          &.second{
            border-color: #57B878;
          }
          &.third{
            border-color: #FF9900;
          }
          &.fourth{
            border-color: #E3615C;
          }
        }
        & .compete-tag{
          width: 50px;
          line-height: 20px;
          color: $clf;
          position: absolute;
          top: 0;
          left: 0;
          &.one{
            background-color: #57B878;
          }
          &.two{
            background-color: #FF9900;
          }
          &.three{
            background-color: #E3615C;
          }
          &.first{
            background-color: #1754D2;
          }
          &.second{
            background-color: #57B878;
          }
          &.third{
            background-color: #FF9900;
          }
          &.fourth{
            background-color: #E3615C;
          }
        }
        & .compete-text{
          color: $fontColor1;
        }
        & .compete-ico{
          color: $fontColor1;
        }
        & .anticon{
          position: absolute;
          right: 5px;
          top: 5px;
        }
        & .search{
          position: absolute;
          width: 100%;
          left: 0;
          top: 75px;
          height: 245px;
          overflow-y: auto;
          border-radius: 5px;
          background-color: $clf;
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.078);
          line-height: normal;
          padding: 5px 0;
          z-index: 9;
          & .list{
            margin-top: 5px;
            & .content{
              line-height: 32px;
              text-align: left;
              color: $fontColor1;
              padding: 0 15px;
              &:hover{
                background-color: $themeColor5;
              }
            }
          }
          & .no-choose{
            color: $fontColor1;
            margin: 100px 0;
          }
          & .no-set{
            color: $fontColor2;
            margin: 90px 0;
          }
        }
      }
      // 单品对比
      & .single{
        position: absolute;
        width: 660px;
        bottom: -320px;
        background-color: $clf;
        box-shadow: 0px 0px 5px rgba(7,25,63,0.15);
        font-size: $fontSize - 2;
        z-index: 4;
        &.one{
          left: 0;
        }
        &.two{
          left: 273px;
        }
        &.three{
          right: 273px;
        }
        &.four{
          right:0;
        }
        & .single-head{
          padding:0 20px;
          border-bottom: 1px solid $themeColor5;
        }
        & .single-content{
          padding:10px 20px;
          & .single-lists{
            height: 227px;
            overflow-y: scroll;
            & .single-list{
              width: 200px;
              box-sizing: border-box;
              padding: 10px;
              border: 1px solid $themeColor20;
              cursor: pointer;
              margin-top: 10px;
              margin-right: 10px;
              @include displayFlex(flex,null,center);
              &:nth-child(3n){
                margin-right: 0;
              }
              &:hover{
                border-color:$themeColor100;
              }
              & .single-img{
                width: 40px;
                height: 40px;
              }
              & .single-title{
                flex-grow: 1;
                @include twoColtextOverflow;
                color: $fontColor1;
                margin-left: 5px;
              }
            }
          }
          & .single-no-data{
            line-height: 227px;
            text-align: center;
            color: $fontColor1;
          }
        }
      }
    }
    & .middle{
      & .data-block{
        width: 260px;
        padding: 10px 20px;
        box-sizing: border-box;
        border: 1px solid $themeColor5;
        cursor: pointer;
        &.active{
          border-color: $themeColor80;
        }
        & .compare{
          font-size: $fontSize - 2;
        }
        & .name{
          font-size: $fontSize - 2;
          &.own{
            color: #1754D2;
          }
          &.one{
            color: #57B878;
          }
          &.two{
            color: #FF9900;
          }
          &.three{
            color: #E3615C;
          }
        }
        & .value{
          font-size: $fontSize + 2;
          color: $fontColor1;
        }
      }
    }
    & .reader-text{
      font-size: $fontSize - 2;
      margin-bottom: 30px;
    }
  }
  .goods-compare{
    padding-bottom: 20px;
    & .publish-block{
      display: inline-block;
      width: 8px;
      height: 20px;
      vertical-align: middle;
      &.own{
        background-color: #1754D2;
      }
      &.one{
        background-color: #57B878;
      }
      &.two{
        background-color: #FF9900;
      }
      &.three{
        background-color: #E3615C;
      }
    }
  }
  & .no-data{
    text-align: center;
    font-size: $fontSize - 2;
    line-height: 240px;
  }
}
